import { useParams } from "react-router-dom"
import ProfileForm from "@/features/ProfileForm"
import { Button } from "@/shared/ui/button"
import { useCreateRequestMutation } from "@/app/user/userApi"

const NewRequestPage = () => {
  const { animalId } = useParams()
  const [createRequest, { isLoading, isFetching }] = useCreateRequestMutation()

  return (
    <div className="flex-1 flex flex-col justify-between gap-4">
      <div className="flex flex-col gap-6">
        <div className="flex flex-col gap-3">
          <h1 className="scroll-m-20 text-4xl font-medium">
            Расскажите о себе
          </h1>
          <p className="text-lg">
            Давайте познакомимся поближе, расскажите нам о себе перед тем,
            как пройти собеседование
          </p>
        </div>
        <ProfileForm />
      </div>
      <Button
        disabled={isLoading || isFetching}
        onClick={() => !!animalId && createRequest({ animal: animalId })}
      >
        Далее
      </Button>
    </div>
  )
}
export default NewRequestPage
